"use client"

import type React from "react"

import { useState } from "react"
import { SiteHeader } from "@/components/site-header"
import { Button } from "@/components/ui/button"
import { Card } from "@/components/ui/card"
import { CheckCircle2 } from "lucide-react"
import { submitWebsite } from "@/apis/client/submission"
import { CreateSubmissionRequest } from "@/types/submission"

export default function SubmitPage() {
  const [formData, setFormData] = useState({
    siteName: "",
    siteUrl: "",
    category: "",
    description: "",
    email: "",
    tags: "",
  })
  const [submitted, setSubmitted] = useState(false)
  const [loading, setLoading] = useState(false)
  const [error, setError] = useState("")

  const handleSubmit = async (e: React.FormEvent) => {
    e.preventDefault()
    setLoading(true)
    setError("")
    
    try {
      const submissionData: CreateSubmissionRequest = {
        siteName: formData.siteName,
        siteUrl: formData.siteUrl,
        category: formData.category,
        description: formData.description,
        email: formData.email,
        tags: formData.tags || undefined,
      }
      
      await submitWebsite(submissionData)
      setSubmitted(true)
      
      setTimeout(() => {
        setSubmitted(false)
        setFormData({
          siteName: "",
          siteUrl: "",
          category: "",
          description: "",
          email: "",
          tags: "",
        })
      }, 3000)
    } catch (err: any) {
      setError(err.response?.data?.message || "提交失败，请稍后重试")
    } finally {
      setLoading(false)
    }
  }

  const handleChange = (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement | HTMLSelectElement>) => {
    setFormData({
      ...formData,
      [e.target.name]: e.target.value,
    })
  }

  return (
    <div className="min-h-screen flex flex-col bg-background">
      <div className="max-w-[1440px] mx-auto px-4 py-12">
        <div className="max-w-4xl mx-auto">
          {/* Header */}
          <div className="text-center mb-12">
            <h1 className="text-4xl font-bold mb-4">网址提交</h1>
            <p className="text-muted-foreground text-lg">提交您的网站到凯笙小世界，让更多用户发现您的优质内容</p>
          </div>

          <div className="grid md:grid-cols-3 gap-8">
            {/* Form */}
            <div className="md:col-span-2">
              <Card className="p-6">
                {submitted ? (
                  <div className="text-center py-12">
                    <CheckCircle2 className="h-16 w-16 text-green-500 mx-auto mb-4" />
                    <h3 className="text-2xl font-bold mb-2">提交成功！</h3>
                    <p className="text-muted-foreground">我们已收到您的提交，将在1-3个工作日内审核并上线</p>
                  </div>
                ) : (
                  <form onSubmit={handleSubmit} className="space-y-6">
                    {error && (
                      <div className="p-4 bg-red-50 border border-red-200 rounded-lg">
                        <p className="text-red-600 text-sm">{error}</p>
                      </div>
                    )}
                    <div>
                      <label htmlFor="siteName" className="block text-sm font-medium mb-2">
                        网站名称 <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="text"
                        id="siteName"
                        name="siteName"
                        value={formData.siteName}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="请输入网站名称"
                      />
                    </div>

                    <div>
                      <label htmlFor="siteUrl" className="block text-sm font-medium mb-2">
                        网站地址 <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="url"
                        id="siteUrl"
                        name="siteUrl"
                        value={formData.siteUrl}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="https://example.com"
                      />
                    </div>

                    <div>
                      <label htmlFor="category" className="block text-sm font-medium mb-2">
                        网站分类 <span className="text-red-500">*</span>
                      </label>
                      <select
                        id="category"
                        name="category"
                        value={formData.category}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                      >
                        <option value="">请选择分类</option>
                        <option value="ai-writing">AI写作</option>
                        <option value="ai-image">AI绘画</option>
                        <option value="ai-video">AI音视频</option>
                        <option value="ai-code">AI代码</option>
                        <option value="ai-office">AI办公</option>
                        <option value="design">设计工具</option>
                        <option value="other">其他</option>
                      </select>
                    </div>

                    <div>
                      <label htmlFor="description" className="block text-sm font-medium mb-2">
                        网站描述 <span className="text-red-500">*</span>
                      </label>
                      <textarea
                        id="description"
                        name="description"
                        value={formData.description}
                        onChange={handleChange}
                        required
                        rows={4}
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary resize-none"
                        placeholder="请简要描述您的网站功能和特色（50-200字）"
                      />
                    </div>

                    <div>
                      <label htmlFor="email" className="block text-sm font-medium mb-2">
                        联系邮箱 <span className="text-red-500">*</span>
                      </label>
                      <input
                        type="email"
                        id="email"
                        name="email"
                        value={formData.email}
                        onChange={handleChange}
                        required
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="your@email.com"
                      />
                    </div>

                    <div>
                      <label htmlFor="tags" className="block text-sm font-medium mb-2">
                        标签（可选）
                      </label>
                      <input
                        type="text"
                        id="tags"
                        name="tags"
                        value={formData.tags}
                        onChange={handleChange}
                        className="w-full px-4 py-2 border border-border rounded-lg focus:outline-none focus:ring-2 focus:ring-primary"
                        placeholder="用逗号分隔，如：AI工具, 图像生成, 免费"
                      />
                    </div>

                    <Button type="submit" className="w-full" size="lg" disabled={loading}>
                      {loading ? "提交中..." : "提交网站"}
                    </Button>
                  </form>
                )}
              </Card>
            </div>

            {/* Guidelines */}
            <div className="space-y-6">
              <Card className="p-6">
                <h3 className="font-bold text-lg mb-4">提交须知</h3>
                <ul className="space-y-3 text-sm text-muted-foreground">
                  <li className="flex gap-2">
                    <span className="text-primary">•</span>
                    <span>请确保网站内容合法合规</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary">•</span>
                    <span>网站需正常访问，无恶意代码</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary">•</span>
                    <span>描述需真实准确，不得夸大</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary">•</span>
                    <span>审核时间为1-3个工作日</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-primary">•</span>
                    <span>审核结果将发送至联系邮箱</span>
                  </li>
                </ul>
              </Card>

              <Card className="p-6">
                <h3 className="font-bold text-lg mb-4">收录标准</h3>
                <ul className="space-y-3 text-sm text-muted-foreground">
                  <li className="flex gap-2">
                    <span className="text-green-500">✓</span>
                    <span>优质的AI工具和服务</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-green-500">✓</span>
                    <span>设计相关的实用工具</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-green-500">✓</span>
                    <span>提高工作效率的应用</span>
                  </li>
                  <li className="flex gap-2">
                    <span className="text-green-500">✓</span>
                    <span>创新的技术产品</span>
                  </li>
                </ul>
              </Card>
            </div>
          </div>
        </div>
      </div>
    </div>
  )
}
